<template>
  <homePanel ref="target" title="人气推荐"  subTitle="人气爆款 不容错过">
    <template #default>
      <ul>
          <li v-for="(item, index) in hotList" :key="index">
            <img v-lazyImg="item.picture"  alt="">
            <h2>{{item.title}}</h2>
            <p>{{item.alt}}</p>
          </li>
      </ul>
    </template>
  </homePanel>
</template>
<script>
import  homePanel  from  './home-panel'
import {reqFindHot}  from  '@/api/home'
import {ref}  from  'vue'
import {useObserver}  from  '@/compositions'
export default {
  components:{
    homePanel
  },
  setup(){
    const hotList=ref([])
    const getHotList=async ()=>{
      const  res=await  reqFindHot()
      //console.log(res,76);
      hotList.value=res.result
    }

    // getHotList()

    const target=useObserver(getHotList)

    return {hotList,target}

  }
  
}
</script>